<template>
  <div id="licharts4" style="height: 20vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "roseEchart4",
  data() {
    return {
      chart: null,
      options: {},
      barData: [],
      lineData: [],
      category: []
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
    // this.inde();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions(this.listData);
      this.initCharts();
    }, 1000);
  },
  methods: {
    // inde() {
    //   this.category = [];
    //   let dottedBase = +new Date();
    //   this.lineData = [];
    //   this.barData = [];
    //   for (let i = 0; i < 20; i++) {
    //     let date = new Date((dottedBase += 3600 * 24 * 1000));
    //     this.category.push(
    //       [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-")
    //     );
    //     let b = Math.random() * 200;
    //     let d = Math.random() * 200;
    //     this.barData.push(b);
    //     this.lineData.push(d);
    //   }
    // },
    initOptions() {
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        title: {
          text: "特殊食品主体"
        },
        legend: {
          top: "80%",
          data: ["保健食品", "医学用途食品", "婴幼儿食品", "其他食品"]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center"
          // feature: {
          //   mark: { show: true },
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ['line', 'bar', 'stack'] },
          //   restore: { show: true },
          //   saveAsImage: { show: true }
          // }
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["流水", "东奥", "平原", "苏澳", "高山"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "保健食品",
            type: "bar",
            barGap: 0,
            // label: labelOption,
            emphasis: {
              focus: "series"
            },
            data: [33, 332, 33, 334, 12]
          },
          {
            name: "医学用途食品",
            type: "bar",
            // label: labelOption,
            emphasis: {
              focus: "series"
            },
            data: [12, 182, 345, 435, 290]
          },
          {
            name: "婴幼儿食品",
            type: "bar",
            // label: labelOption,
            emphasis: {
              focus: "series"
            },
            data: [34, 312, 45, 32, 234]
          },
          {
            name: "其他食品",
            type: "bar",
            // label: labelOption,
            emphasis: {
              focus: "series"
            },
            data: [98, 77, 23, 99, 40]
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("licharts4"));
      this.chart.setOption(this.options);
    }
  }
};
</script>
